<!-- 后台人员管理 -->
<template>
  <div class="backPeopleManage">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="城市：" prop="cityId">
        <el-select filterable v-model="searchForm.cityId" placeholder="请选择城市">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({city,cityId},index) in cityOption"
            :key="index"
            :label="city"
            :value="cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色：" prop="cityId">
        <el-select filterable v-model="searchForm.cityId" placeholder="请选择城市">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="({city,cityId},index) in cityOption"
            :key="index"
            :label="city"
            :value="cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户：">
        <el-input v-model="searchForm.dicValue" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="viewList('add')">新建后台人员</el-button>
      </el-form-item>
    </el-form>
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :hasSera="true"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "./tableList";
export default {
  name: "backPeopleManage",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      cityOption: [],
      searchForm: {
        typeName: "",
        dicKey: "",
        dicValue: ""
      },
      tableInfos: [
        { label: "姓名", prop: "dicDesc" },
        { label: "手机号", prop: "dicKey" },
        { label: "EHR工号", prop: "dicOrder" },
        { label: "角色", prop: "dicValue" },
        { label: "账户类型", prop: "typeName" },
        { label: "注册/开通时间", prop: "typeName" },
        { label: "权限操作", prop: "changeBtn" },
        {
          label: "楼盘设置",
          prop: "btn",
          btns: [{ label: "绑定楼盘", type: "view", fn: this.bound }]
        }
      ],
      tableChangeBtns: [
        { label: "查看", type: "view", fn: this.viewList },
        { label: "编辑", type: "edit", fn: this.viewList },
        { label: "删除", type: "dele", fn: this.deleteItem }
      ],
      tableData: [
        {
          dicDesc: "1",
          typeName: "2",
          dicKey: "3",
          dicValue: "4",
          dicOrder: "5"
        }
      ],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  methods: {
    //绑定楼盘
    bound() {},
    //新增查看编辑
    viewList(type, idx) {
      //let insideId;
      //if (type != "add") insideId = this.tableData[idx].id;
      let row = this.tableData[idx];
      this.$router.push({
        path: "/partamsChange",
        query: { pageType: type, row: row }
      });
    },
    //删除
    deleteItem(type, idx) {
      this.$confirm(`确定要删除当前列表吗？`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let params = {
            id: this.tableData[idx].id
          };
          this.$axios.post("/sysdic/dicDelete", params).then(res => {
            if (res.data.code == 200) {
              this.tableData.splice(idx, 1);
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.searchList();
            }
          });
        })
        .catch(() => {});
    },
    searchList(pageNum) {
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm
      };
      this.$axios.post("/sysdic/selectDicList", param).then(res => {
        this.tableData = res.list;
        this.totalSize = res.total;
      });
    },

    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  created() {
    this.searchList();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.backPeopleManage {
}
</style>
